<template>
    <z-paging>
        <u-sticky>
            <hedsty :headCentext="'进阶'"></hedsty>
        </u-sticky>
        <view class="image_box">
            <image :src="xuazede.goods_image" mode="widthFix" />
        </view>
        <view class="dizuo_box" style="background-image: url('https://morgan.dingxians.cn/static/jinjie/1.png');">
            <view class="zhongjiantupian_box"
                style="background-image: url('https://morgan.dingxians.cn/static/jinjie/2.png');">{{
                    xuazede.goods_name }}
            </view>
        </view>
        <view class="xuanze_uyu_bopx">
            <view class="dange_box" v-for="(item, index) in shopObj" :key="index" @click="dangebtn(item)"
                :class="dangeid == item.id ? 'dange_box1' : ''">
                <image :src="item.goods_image" mode="widthFix" />
            </view>
        </view>
        <view class="hechedngchee_box"
            style="background-image: url('https://morgan.dingxians.cn/static/jinjie/3.png');">
            <view class="jinduxianshitext_box">
                <view class="o">进阶进度{{ (percentage * 1) > 100 ? '100' : percentage }}%({{ selBonusPrice }}/{{ xuazede.price }})</view>
                <view class="t" @click="jinjie">自动添加</view>
                <view class="r" @click="delooo">全部删除</view>
            </view>
            <view class="jindutiao_box">
                <u-line-progress :percentage="percentage" :showText="false" inactiveColor="rgba(240, 243, 245, .1)"
                    activeColor="rgba(253, 214, 204, 1)"></u-line-progress>
            </view>
            <view class="xianshi_box">
                <view class="big_bxcon_box" v-for="(item, index) in createList" :key="index">
                    <view class="dange_sel_shangpin_box"
                        style="background-image: url('https://morgan.dingxians.cn/static/fuyuri/16.png');">
                        <image :src="item.box_prize_image" mode="heightFix" />
                    </view>
                    <view class="shanchu" @click="deladress(item)"
                        style="background-image: url('https://morgan.dingxians.cn/static/address/2.png');">
                    </view>
                    <view class="nuim_box">{{ item.setpValue }}</view>
                    <view class="content_name_box">{{ item.box_prize_name }}</view>
                </view>
                <view class="big_bxcon_box1">
                    <view class="dange_sel_shangpin_box1"
                        style="background-image: url('https://morgan.dingxians.cn/static/fuyuri/16.png');">
                        <image src="https://morgan.dingxians.cn/static/fuyuri/15.png" @click="createBtn"
                            mode="heightFix" />
                    </view>
                </view>
                <view class="a" style="width: 200rpx;" v-for="i in 2"></view>
            </view>
        </view>
        <view class="zengsongbtn" @click="$no(jinjie1)"
            style="background-image: url('https://morgan.dingxians.cn/static/bonusgive/2.png');">确认进阶
        </view>
    </z-paging>
</template>
<script>
import hedsty from '../components/hedsty.vue'
export default {
    components: {
        hedsty
    },
    data() {
        return {
            noClick: true,
            shopObj: [
                {
                    goods_image: '',
                    goods_name: '',
                }
            ],
            dangeid: '',
            xuazede: {},
            lzshop: false

        }
    },
    onLoad(e) {
        this.dangeid = JSON.parse(e.item).id
        this.xuazede = JSON.parse(e.item)
        this.lzshop = e.lzshop
    },
    computed: {
        // 选中的商品id
        selectBonusId() {
            return this.createList.filter(item => {
                return item.flag == true
            }).map(item => {
                return item.id + ':' + item.setpValue;
            })
        },
        // 选中的商品list用于creat页展示、获取id
        createList() {
            let housArr = [];
            this.$store.state.canadvList.filter(item => {
                return item.flag == true
            }).forEach((item) => {
                housArr.push(item)
            })
            return housArr;
        },
        // 选中的商品总兑换价
        selBonusPrice() {
            var total = 0;
            this.createList.filter(item => {
                return item.flag == true
            }).forEach((item) => {
                total += (item.price * item.setpValue)
            })
            return total.toFixed(2);
        },
        // 进度条百分比
        percentage() {
            var num = 0
            this.createList.filter(item => {
                return item.flag == true
            }).forEach(item => {
                num += ((item.price * item.setpValue) / (this.xuazede.price * 1)) * 100
            })
            return num.toFixed(2)
        }
    },
    onShow() {
        this.getData()
    },
    methods: {
        getData() {
            this.$Request.get(this.$api.bonus.fusionPrizes).then(res => {
                if (res.code == 200) {
                    this.shopObj = res.data.data

                    if (!this.lzshop) {
                        this.xuazede = res.data.data[0]
                    }
                }
            })
        },
        jinjie() {
            let data = {
                prize_id: this.xuazede.id
            }
            this.$Request.get(this.$api.bonus.fusionPrizesAutoAdd, data).then(res => {
                if (res.code == 200) {
                    res.data.data.forEach(item => {
                        item.flag = true
                        item.setpValue = item.num
                    })
                    this.$store.state.canadvList = res.data.data
                   

                }
            })
        },
        jinjie1() {
            let data = {
                prize_id: this.xuazede.id,
                params: this.selectBonusId.join(','),
            }
            this.$Request.post(this.$api.bonus.advancePrizesStore, data).then(res => {
                if (res.code == 200) {
                    this.$msg(res.msg)
					this.$store.state.canadvList = []
                    res.data.data.forEach(item => {
                        item.flag = true
                    })
                }

            })
        },
        deladress(item) {
            item.flag = false
        },
        dangebtn(item) {
            this.shopObj[0] = item
            this.xuazede = item
            this.dangeid = item.id
        },
        createBtn() {
            this.$store.state.canadvList = this.createList
            this.$router('/shopPage/kejinjieshangpin')
        },
        delooo() {
            this.$store.state.canadvList = []
        },

    }
}
</script>
<style lang="scss" scoped>
.image_box {
    width: 413rpx;
    height: 500rpx;
    margin: auto;
    z-index: 99999;
    position: relative;

    image {
        width: 100%;
    }
}

.dizuo_box {
    width: 100%;
    height: 235rpx;
    margin: auto;
    margin-top: -90rpx;
    margin-bottom: 28rpx;
    background-size: 100% 100%;
    position: relative;

    .zhongjiantupian_box {
        position: absolute;
        width: 360rpx;
        height: 91rpx;
        font-family: text1;
        font-weight: bold;
        background-size: 100% 100%;
        font-size: 32rpx;
        color: #FFFFFF;
        line-height: 91rpx;
        font-style: italic;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }


}

.xuanze_uyu_bopx {
    width: 100%;
    height: 114rpx;
    box-sizing: border-box;
    padding-left: 24rpx;
    display: flex;
    justify-content: flex-start;
    overflow: hidden;
    overflow-x: auto;
    margin-bottom: 50rpx;

    .dange_box {
        width: 100rpx;
        height: 100rpx;
        flex-shrink: 0;
        background: #0E1939;
        border-radius: 10rpx;
        margin-right: 25rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        &.dange_box1 {
            border: 2px solid #FFEDD7;
        }

        image {
            width: 80rpx;

        }
    }
}

.hechedngchee_box {
    width: 690rpx;
    min-height: 410rpx;
    margin: auto;
    margin-bottom: 58rpx;
    box-sizing: border-box;
    padding: 20rpx;
    background-size: 100% 100%;

    .jinduxianshitext_box {
        width: 100%;
        height: 42rpx;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #FFFFFF;
        line-height: 42rpx;
        display: flex;
        justify-content: space-between;
        margin-bottom: 30rpx;
    }

    .jindutiao_box {
        width: 640rpx;
        height: 24rpx;
        background: rgba(251, 109, 46, .3);
        border-radius: 12rpx;
        margin: auto;
        margin-bottom: 38rpx;
    }

    .xianshi_box {
        width: 100%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        max-height: 600rpx;
        overflow: hidden;
        overflow-y: auto;
        margin-bottom: 30rpx;

        .big_bxcon_box {
            flex-shrink: 0;
            width: 200rpx;
            height: 239rpx;
            margin-bottom: 16rpx;
            position: relative;

            .nuim_box {
                position: absolute;
                font-size: 20rpx;
                left: 20rpx;
                top: 10rpx;
                color: #fff;
            }

            .shanchu {
                width: 30rpx;
                height: 32rpx;
                background-size: 100% 100%;
                position: absolute;
                right: 0rpx;
                top: 0rpx;
            }

            .dange_sel_shangpin_box {
                width: 200rpx;
                height: 200rpx;
                background-size: 100% 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 16rpx;

                image {
                    height: 170rpx;
                }
            }

            .content_name_box {
                width: 100%;
                height: 23rpx;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #FFFFFF;
                line-height: 23rpx;
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .big_bxcon_box1 {
            width: 200rpx;
            height: 239rpx;
            margin-bottom: 16rpx;

            .dange_sel_shangpin_box1 {
                width: 200rpx;
                height: 200rpx;
                background-size: 100% 100%;
                display: flex;
                justify-content: center;
                align-items: center;

                image {
                    display: block;
                    width: 73rpx;
                    height: 83rpx;
                }
            }
        }

    }
}

.zengsongbtn {
    width: 529rpx;
    height: 120rpx;
    background-size: 100% 100%;
    margin: auto;
    font-family: text1;
    font-weight: bold;
    font-size: 36rpx;
    color: #FFFFFF;
    line-height: 120rpx;
    text-align: center;
}
</style>